<template>
  <a-form-item :label="title" :fieldDecoratorId="names" :fieldDecoratorOptions="{rules: [{ required: required, message: '请输入'+title }]}">
    <p v-if='isReadOnlyPage === true'>{{this.strValue}}</p>
    <a-tree-select v-else :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }" :treeData="treeData" placeholder='请输入用人部门' treeDefaultExpandAll allowClear v-model='value1'>
    </a-tree-select>
  </a-form-item>
</template>

<script>
import { getdepartment } from '@/api/createjobs'
const treeData = [
  {
    title: '全部',
    value: '0-0',
    key: '0-0',
    children: [],
    isShow: true
  }
]
export default {
  props: ['title', 'names', 'required', 'isReadOnlyPage', 'strValue'],
  data () {
    return {
      changeDepartment: '',
      treeData,
      value1: ''
    }
  },
  watch: {
    value1: function (value) {
      console.log(value)
      // this.$emit('creatDepartmentId', value)
    }
  },
  mounted () {
    this.userTemplate()
  },
  methods: {
    userTemplate () {
      getdepartment().then(response => {
        this.treeData = resizeTree(response.data)
      }).catch(error => {
        return error.data
      })
    }
  }
}
function resizeTree (arr, key = 0) {
  if (!Array.isArray(arr)) return
  return arr.map((item, index) => {
    let treekey = `${key}-${index}`
    return { title: item.name, value: item.id, key: treekey, id: item.id, children: resizeTree(item.children, treekey) }
  })
}
</script>
